<template>
  <div class="homeShop">
    <router-link to="path"
                 v-for="item in datas"
                 :key="item._id">
      <div class="link">
        <div class="img">
          <img :src="
              'https://easytuan.gitee.io/node-elm-api/public/' + item.image_path
            " />
        </div>

        <div class="text-center">
          <div class="pp">
            <h3 class="pinpai">品牌</h3>
            <h2 v-text="item.name"
                class="ming"></h2>
          </div>
          <div class="xing">
            <p v-text="item.rating"
               class="fen"></p>
            <p class="xiaoliang">月销{{ item.recent_order_num }}单</p>
          </div>
          <div class="feiyong">
            <p class="qisong">
              ￥{{ item.float_minimum_order_amount }}起送/{{
                item.piecewise_agent_fee.tips
              }}
            </p>
          </div>
        </div>

        <div class="text-right">
          <div class="bao">
            <p class="bao1"
               v-for="(piao, index) in item.supports"
               :key="index">
              {{ piao.icon_name }}&nbsp;&nbsp;&nbsp;
            </p>
          </div>
          <div class="song">
            <p class="song1"
               v-if="item.delivery_mode">蜂鸟专送</p>
            <p class="song2"
               v-if="item.supports.length == 3">准时达</p>
          </div>

          <div class="juli">
            <p class="juli1"
               v-text="item.distance"></p>
            <span>/</span>
            <p class="juli2"
               v-text="item.order_lead_time"></p>
          </div>
        </div>
      </div>
    </router-link>
    <div class="more">没有更多了</div>
  </div>
</template>

<script>
export default {
  name: "HomeShop",
  props: ["sources"],
  data: function () {
    return {
      datas: this.sources
    };
  }
};
</script>

<style lang="less" scoped>
.homeShop {
  .more {
    width: 100%;
    height: 200px;

    text-align: center;
    color: black;
  }
  .link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .img {
      display: inline-block;

      ing {
        width: 0.1rem;
      }
    }
    .text-center {
      margin-top: 0.2rem;
      .pinpai {
        color: #333;
        background-color: #ffd930;
        display: inline-block;
        font-size: 0.5rem;
        line-height: 0.6rem;
      }
      .ming {
        display: inline-block;
      }
      .xing {
        margin: 5px auto;
        .fen {
          font-size: 0.4rem;
          color: #ff6000;
          margin: 0 0.2rem;
          display: inline-block;
        }
        .xiaoliang {
          display: inline-block;
        }
      }
      .feiyong {
        display: inline-block;
        .qisong {
          display: inline-block;
          color: #666;
        }
        .peisong {
          display: inline-block;
        }
      }
    }

    .text-right {
      .bao {
        font-size: 0.1rem;
        color: #999;
        border: 0.025rem solid #f1f1f1;
        padding: 0 0.04rem;
        border-radius: 0.08rem;
        margin-left: 0.05rem;
        .bao1 {
          display: inline-block;
          padding: 5%;
        }
      }
      .song {
        margin-top: 20px;
        //  display: inline-block;
        .song1 {
          margin-top: 20px;
          display: inline-block;
          color: #fff;
          background-color: #1070ff;
          border: 0.025rem solid #1070ff;
        }
        .song2 {
          margin-top: 20px;
          display: inline-block;
          color: #1070ff;
          border: 0.005rem solid #1070ff;
        }
      }
      .juli {
        margin-top: 20px;
        .juli1 {
          display: inline-block;
        }
        .juli2 {
          display: inline-block;
          color: #1070ff;
        }
      }
    }
  }
}
</style>
